import React, { useContext } from 'react';
import { MenuContext } from './menu';
import classNames from 'classnames';

export interface MenuItemProps {
  index?: string;
  disabled?: boolean;
  className?: string;
  style?: React.CSSProperties;
}

const MenuItem: React.FC<MenuItemProps> = (props) => {
  // 解构
  const { index, disabled, className, style, children } = props;

  const context = useContext(MenuContext);

  const handleClick = () => {
    if (context.onSelect && !disabled && (typeof index === 'string') ) {
      context.onSelect(index);
    }
  }
  // 类名
  const classes = classNames("origin-menu-item", className, {
    "origin-menu-is-disabled": disabled,
    "origin-menu-is-active": context.index === index
  });
  
  return (<li className={classes} style={style} onClick={ handleClick }>
    {children}
  </li>)
}

MenuItem.displayName = 'MenuItem';

export default MenuItem;